<template>
  <div
    class="community-page overflow-scroll"
    @scroll="handleScroll"
    ref="communityPageRef"
  >
    <communitywecome></communitywecome>

    <div class="communityHome-page flex">
      <!-- 左侧 -->
      <div class="community-position">
        <div class="community-position-left"  ref="communityLeftRef" :style="{
            top: leftSticky + 'px',
          }">
          <communityLeft></communityLeft>
        </div>
      </div>

      <!-- 中间 -->
      <communityCenter ref="communityCenterRef" @setMore="setMore"></communityCenter>

      <!-- 右侧 -->
      <div class="community-position">
        <communityRight
          ref="communityRightRef"
          class="community-position-right"
          :style="{
            top: rightSticky + 'px',
          }"
          :hot="true"
          :friendcommunity="true"
          :user="true"
          :ercode="true"
        ></communityRight>
      </div>

      <!-- 返回顶部按钮 -->
      <div
        class="back-top-box"
        :class="{ 'svg-icon-show': showTop }"
        @click="scrollToTop"
      >
        <svg-icon class="svg-icon" name="icon-fhdb-bai"></svg-icon>
      </div>
    </div>
  </div>
</template>
<script>
import communityLeft from "./communityLeft.vue";
import communityRight from "./communityRight.vue";
import communityCenter from "./communityCenter.vue";
import scrollMore from "@/components/scrollMore.vue";
import communitywecome from "@/views/community/components/communitywecome.vue";

import { useStore } from "vuex";
import { useRouter } from "vue-router";
import {
  defineComponent,
  reactive,
  toRefs,
  onUnmounted,
  onMounted,
  computed,
  getCurrentInstance,
  ref,
  watch,
} from "vue";
export default defineComponent({
  components: {
    communityLeft,
    communityRight,
    communityCenter,
    scrollMore,
    communitywecome,
  },
  setup(props, { attrs, slots, emit }) {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const store = useStore();
    let data = reactive({
      rightSticky: 70, //右侧吸顶高度
      leftSticky:70, //左侧吸顶高度
      hasMore: true, //是否还有下一页
      showTop: false, //返回顶部按钮显示隐藏
    });

    let communityLeftRef = ref(null); //左侧元素

    let communityRightRef = ref(null); //右侧元素

    let communityCenterRef = ref(null); //帖子列表

    let communityPageRef = ref(null); //页面外层

    let timer = null; //滚动节流

    // 子元素没有更多帖子
    let setMore = (hasMore) => {
      data.hasMore = hasMore;
    };

    // 监听滚动 加载更多帖子
    let handleScroll = (e) => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        setRightTop();
        setLeftTop();
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        let scrollTop = e.target.scrollTop;
        if (scrollTop > 100) {
          store.commit("setHideHeaderBg", true);
        } else {
          store.commit("setHideHeaderBg", false);
        }
        scrollTop > 1000 ? (data.showTop = true) : (data.showTop = false);
        // 如果还有下一页
        if (data.hasMore) {
          // 变量windowHeight是可视区的高度
          let windowHeight = communityPageRef.value.clientHeight;
          //变量scrollHeight是滚动条的总高度
          let scrollHeight = communityPageRef.value.scrollHeight;
          if (scrollTop + windowHeight + 1000 >= scrollHeight) {
            communityCenterRef.value.getIndexPosts(true);
          }
        }
      }, 100);
    };

    // 设置右侧元素sticky值
    let setRightTop = () => {
      let rightHeight =communityRightRef.value? communityRightRef.value.$el.offsetHeight:0; //获取子组件高度
      let viewHeight = communityPageRef.value?communityPageRef.value.clientHeight:0; //可视区域高度
      if (rightHeight > viewHeight) {
        data.rightSticky = viewHeight - rightHeight - 20;
      } else {
        data.rightSticky = 70;
      }
    };

   // 设置左侧元素sticky值
   let setLeftTop = () => {
      let leftHeight =communityLeftRef.value? communityLeftRef.value.offsetHeight:0; //获取子组件高度
      let viewHeight = communityPageRef.value?communityPageRef.value.clientHeight:0; //可视区域高度
      if (leftHeight > viewHeight) {
        data.leftSticky = viewHeight - leftHeight - 20;
      } else {
        data.leftSticky = 70;
      }
    };



    // 滚动条回到顶部
    let scrollToTop = () => {
      communityPageRef.value.scrollTop = 0;
    };

    onMounted(() => {
      store.commit("setHideHeaderBg", false);
      store.commit("setHeaderFixed", true);

      proxy.$nextTick(() => {
        setTimeout(() => {
          setRightTop();
          setLeftTop();
        }, 1000);
      });
    });

    onUnmounted(() => {
      store.commit("setHeaderFixed", false);
    });

    return {
      communityLeftRef,
      communityPageRef,
      handleScroll,
      scrollToTop,
      setMore,
      communityRightRef,
      communityCenterRef,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.community-page {
  height: 100%;
  background: #f9f9f9;
}

.communityHome-page {
  padding: 0 30px;
  max-width: 1440px;
  min-width: 1200px;
  margin: 0 auto;
}

.community-position {
  position: relative;
}

.community-position-left {
  position: sticky;
  // top: 70px;
  z-index: 2;
}

.community-position-right {
  position: sticky;
}

// 返回顶部
.back-top-box {
  position: fixed;
  right: 20px;
  bottom: 30px;
  transition: opacity 0.3s;
  opacity: 0;
  .svg-icon {
    width: 50px;
    height: 50px;
  }
}
// 显示返回顶部
.svg-icon-show {
  opacity: 1;
  cursor: pointer;
}
</style>
